<!--
  支付详情组件
  @description 查看支付订单的详细信息
  @author AI Assistant
  @since 1.0.0
-->
<template>
  <Dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="900px"
    :scroll="true"
    max-height="600px"
  >
    <div v-loading="loading">
      <!-- 支付基本信息 -->
      <el-card class="mb-20px">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.payment.basicInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="3" border v-if="paymentData">
          <el-descriptions-item :label="t('settle.payment.orderNo')">
            {{ paymentData.orderNo }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.merchantNo')">
            {{ paymentData.merchantNo }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.merchantName')">
            {{ paymentData.merchantName }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.paymentAmount')">
            <span class="amount-text">¥{{ (paymentData.paymentAmount / 100).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.channelType')">
            <el-tag :type="getChannelTypeTagType(paymentData.channelType)">
              {{ channelTypeOptions[paymentData.channelType] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.paymentMethod')">
            <el-tag :type="getPaymentMethodTagType(paymentData.paymentMethod)">
              {{ paymentMethodOptions[paymentData.paymentMethod] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.paymentStatus')">
            <el-tag :type="getPaymentStatusTagType(paymentData.paymentStatus)">
              {{ paymentStatusOptions[paymentData.paymentStatus] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.paymentTime')">
            {{ formatDate(paymentData.paymentTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.channelOrderNo')">
            {{ paymentData.channelOrderNo || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.subject')" :span="2">
            {{ paymentData.subject }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.body')" :span="3" v-if="paymentData.body">
            {{ paymentData.body }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 退款信息 -->
      <el-card class="mb-20px" v-if="paymentData?.refundAmount && paymentData.refundAmount > 0">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.payment.refundInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="3" border>
          <el-descriptions-item :label="t('settle.payment.refundAmount')">
            <span class="refund-text">¥{{ (paymentData.refundAmount / 100).toFixed(2) }}</span>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.refundStatus')">
            <el-tag :type="getRefundStatusTagType(paymentData.refundStatus)">
              {{ refundStatusOptions[paymentData.refundStatus || 0] }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.refundTime')">
            {{ formatDate(paymentData.refundTime) }}
          </el-descriptions-item>
          <el-descriptions-item
            :label="t('settle.payment.refundReason')"
            :span="3"
            v-if="paymentData.refundReason"
          >
            {{ paymentData.refundReason }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 技术信息 -->
      <el-card class="mb-20px">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.payment.technicalInfo') }}</span>
          </div>
        </template>
        <el-descriptions :column="2" border v-if="paymentData">
          <el-descriptions-item :label="t('settle.payment.clientIp')">
            {{ paymentData.clientIp || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.userAgent')">
            {{ paymentData.userAgent || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.notifyUrl')">
            {{ paymentData.notifyUrl || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.payment.returnUrl')">
            {{ paymentData.returnUrl || '-' }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.common.createTime')">
            {{ formatDate(paymentData.createTime) }}
          </el-descriptions-item>
          <el-descriptions-item :label="t('settle.common.updateTime')">
            {{ formatDate(paymentData.updateTime) }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>

      <!-- 扩展信息 -->
      <el-card v-if="paymentData?.channelExtras">
        <template #header>
          <div class="card-header">
            <span>{{ t('settle.payment.channelExtras') }}</span>
          </div>
        </template>
        <el-input
          v-model="paymentData.channelExtras"
          type="textarea"
          :rows="6"
          readonly
          class="extras-textarea"
        />
      </el-card>
    </div>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useI18n } from 'vue-i18n'
import { formatDate } from '@/utils/formatTime'
import { getPaymentOrderApi } from '@/api/settle/payment'
import type { PaymentVO } from '@/api/settle/types'
import {
  PaymentStatusEnum,
  ChannelTypeEnum,
  PaymentMethodEnum,
  RefundStatusEnum
} from '@/api/settle/types'
import { Dialog } from '@/components/Dialog'

defineOptions({ name: 'PaymentDetail' })

const { t } = useI18n()

// 弹窗相关
const dialogVisible = ref(false)
const dialogTitle = ref('')
const loading = ref(false)

// 支付数据
const paymentData = ref<PaymentVO>()

// 选项数据
const channelTypeOptions = {
  [ChannelTypeEnum.WECHAT]: t('settle.payment.channelTypes.wechat'),
  [ChannelTypeEnum.ALIPAY]: t('settle.payment.channelTypes.alipay'),
  [ChannelTypeEnum.UNIONPAY]: t('settle.payment.channelTypes.unionpay'),
  [ChannelTypeEnum.DIGITAL_RMB]: t('settle.payment.channelTypes.digitalRmb')
}

const paymentMethodOptions = {
  [PaymentMethodEnum.JSAPI]: t('settle.payment.paymentMethods.jsapi'),
  [PaymentMethodEnum.NATIVE]: t('settle.payment.paymentMethods.native'),
  [PaymentMethodEnum.APP]: t('settle.payment.paymentMethods.app'),
  [PaymentMethodEnum.H5]: t('settle.payment.paymentMethods.h5'),
  [PaymentMethodEnum.MICROPAY]: t('settle.payment.paymentMethods.micropay')
}

const paymentStatusOptions = {
  [PaymentStatusEnum.PENDING]: t('settle.payment.paymentStatuses.pending'),
  [PaymentStatusEnum.SUCCESS]: t('settle.payment.paymentStatuses.success'),
  [PaymentStatusEnum.FAILED]: t('settle.payment.paymentStatuses.failed'),
  [PaymentStatusEnum.CANCELLED]: t('settle.payment.paymentStatuses.cancelled')
}

const refundStatusOptions = {
  [RefundStatusEnum.PENDING]: t('settle.payment.refundStatuses.pending'),
  [RefundStatusEnum.SUCCESS]: t('settle.payment.refundStatuses.success'),
  [RefundStatusEnum.FAILED]: t('settle.payment.refundStatuses.failed')
}

/**
 * 打开对话框
 */
const open = async (payment: PaymentVO) => {
  dialogVisible.value = true
  dialogTitle.value = t('settle.payment.detail') + ' - ' + payment.orderNo
  loading.value = true

  try {
    // 获取支付详情
    const data = await getPaymentOrderApi(payment.id)
    paymentData.value = data
  } catch (error) {
    console.error('获取支付详情失败:', error)
  } finally {
    loading.value = false
  }
}

// 标签类型获取函数
const getChannelTypeTagType = (type: number) => {
  const typeMap = {
    [ChannelTypeEnum.WECHAT]: 'success',
    [ChannelTypeEnum.ALIPAY]: 'primary',
    [ChannelTypeEnum.UNIONPAY]: 'warning',
    [ChannelTypeEnum.DIGITAL_RMB]: 'info'
  }
  return typeMap[type] || ''
}

const getPaymentMethodTagType = (method: number) => {
  const methodMap = {
    [PaymentMethodEnum.JSAPI]: 'primary',
    [PaymentMethodEnum.NATIVE]: 'success',
    [PaymentMethodEnum.APP]: 'warning',
    [PaymentMethodEnum.H5]: 'info',
    [PaymentMethodEnum.MICROPAY]: 'danger'
  }
  return methodMap[method] || ''
}

const getPaymentStatusTagType = (status: number) => {
  const statusMap = {
    [PaymentStatusEnum.PENDING]: 'warning',
    [PaymentStatusEnum.SUCCESS]: 'success',
    [PaymentStatusEnum.FAILED]: 'danger',
    [PaymentStatusEnum.CANCELLED]: 'info'
  }
  return statusMap[status] || ''
}

const getRefundStatusTagType = (status?: number) => {
  if (!status) return ''
  const statusMap = {
    [RefundStatusEnum.PENDING]: 'warning',
    [RefundStatusEnum.SUCCESS]: 'success',
    [RefundStatusEnum.FAILED]: 'danger'
  }
  return statusMap[status] || ''
}

// 暴露方法
defineExpose({ open })
</script>

<style scoped>
.mb-20px {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-text {
  color: #409eff;
  font-weight: bold;
  font-size: 16px;
}

.refund-text {
  color: #e6a23c;
  font-weight: bold;
}

.extras-textarea {
  font-family: 'Courier New', monospace;
}
</style>
